<template>
    <div class="container">
        <div class="chart">
            <e-charts ref="chart1" style="width: 100%; height: 100%" :option="option1"></e-charts>
        </div>
        <!-- <dv-decoration-2 :reverse="true" style="width: 5px; height: 100px" dur="6" /> -->
        <div class="chart">
            <e-charts ref="chart2" style="width: 100%; height: 100%" :option="option2"></e-charts>
        </div>
        <!-- <dv-decoration-2 :reverse="true" style="width: 5px; height: 100px" dur="6" /> -->
        <div class="chart">
            <e-charts ref="chart3" style="width: 100%; height: 100%" :option="option3"></e-charts>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import http from '@/utils/http'
import * as util from '@/utils/util'
import { ElMessage } from 'element-plus'

onMounted(async () => {
    await getData()
    setInterval(function () {
        getData()
    }, 60 * 1000)
    nextTick(() => {
        emits('finish')
    })
})

const emits = defineEmits(['finish'])

const chart1 = ref()
const chart2 = ref()
const chart3 = ref()

// 监听窗口大小变化事件
window.addEventListener('resize', function () {
    if (chart1.value) {
        chart1.value.resize()
    }
    if (chart2.value) {
        chart2.value.resize()
    }
    if (chart3.value) {
        chart3.value.resize()
    }
})

const option1 = ref({
    series: [
        {
            type: 'gauge',
            min: 0,
            max: 25,
            axisLine: {
                lineStyle: {
                    width: 12,
                    color: [
                        [0.1, '#5FB878'],
                        [0.8, '#1E9FFF'],
                        [1, '#FF5722'],
                    ],
                },
            },
            pointer: {
                show: true,
                itemStyle: {
                    color: 'auto',
                },
                width: 2,
            },
            axisTick: {
                distance: 3,
                length: 3,
                lineStyle: {
                    color: '#fff',
                    width: 1,
                },
            },
            splitLine: {
                distance: 5,
                length: 6,
                lineStyle: {
                    color: '#fff',
                    width: 2,
                },
            },
            axisLabel: {
                color: 'auto',
                distance: 15,
                fontSize: 10,
            },
            title: {
                show: true,
                fontSize: 14,
                color: '#b8e6ff',
                offsetCenter: ['0%', '110%'],
            },
            detail: {
                valueAnimation: true,
                color: 'auto',
                fontSize: 18,
                formatter: '{value}',
                offsetCenter: ['0%', '75%'],
            },
            data: [
                {
                    name: '油烟浓度(mg/m3)',
                    value: 0,
                },
            ],
        },
    ],
})

const option2 = ref({
    series: [
        {
            type: 'gauge',
            min: 0,
            max: 45,
            axisLine: {
                lineStyle: {
                    width: 12,
                    color: [
                        [0.1, '#5FB878'],
                        [0.8, '#1E9FFF'],
                        [1, '#FF5722'],
                    ],
                },
            },
            pointer: {
                show: true,
                itemStyle: {
                    color: 'auto',
                },
                width: 2,
            },
            axisTick: {
                distance: 3,
                length: 3,
                lineStyle: {
                    color: '#fff',
                    width: 1,
                },
            },
            splitLine: {
                distance: 5,
                length: 6,
                lineStyle: {
                    color: '#fff',
                    width: 2,
                },
            },
            axisLabel: {
                color: 'auto',
                distance: 15,
                fontSize: 10,
            },
            title: {
                show: true,
                fontSize: 14,
                color: '#b8e6ff',
                offsetCenter: ['0%', '110%'],
            },
            detail: {
                valueAnimation: true,
                color: 'auto',
                fontSize: 18,
                formatter: '{value}',
                offsetCenter: ['0%', '75%'],
            },
            data: [
                {
                    value: 0,
                    name: '非甲烷总径(mg/m3)',
                },
            ],
        },
    ],
})

const option3 = ref({
    series: [
        {
            type: 'gauge',
            min: 0,
            max: 15,
            axisLine: {
                lineStyle: {
                    width: 12,
                    color: [
                        [0.1, '#5FB878'],
                        [0.8, '#1E9FFF'],
                        [1, '#FF5722'],
                    ],
                },
            },
            pointer: {
                itemStyle: {
                    color: 'auto',
                },
                width: 2,
            },
            axisTick: {
                distance: 3,
                length: 3,
                lineStyle: {
                    color: '#fff',
                    width: 1,
                },
            },
            splitLine: {
                distance: 5,
                length: 6,
                lineStyle: {
                    color: '#fff',
                    width: 2,
                },
            },
            axisLabel: {
                color: 'auto',
                distance: 15,
                fontSize: 10,
            },
            title: {
                show: true,
                fontSize: 14,
                color: '#b8e6ff',
                offsetCenter: ['0%', '110%'],
            },
            detail: {
                valueAnimation: true,
                formatter: '{value} ',
                color: 'auto',
                fontSize: 18,
                offsetCenter: ['0%', '75%'],
            },
            data: [
                {
                    value: 0,
                    name: '颗粒物(mg/m3)',
                },
            ],
        },
    ],
})

const getData = async () => {
    var mid = util.GetQueryParam('mid')
    if (mid) {
        var res = await http.get(`getlastrecord?mid=${mid}`)

        if (res.status === 0) {
            if (res.data) {
                var data = res.data
                if (data.a00000_Rtd) {
                    option1.value.series[0].data = [
                        {
                            value: data.a00000_Rtd,
                            name: '油烟浓度(mg/m3)',
                        },
                    ]
                } else {
                    option1.value.series[0].data = []
                }
                if (data.a24088_Rtd) {
                    option2.value.series[0].data = [
                        {
                            value: data.a24088_Rtd,
                            name: '非甲烷总径(mg/m3)',
                        },
                    ]
                } else {
                    option2.value.series[0].data = []
                }

                if (data.a34001_Rtd) {
                    option3.value.series[0].data = [
                        {
                            value: data.a34001_Rtd,
                            name: '颗粒物(mg/m3)',
                        },
                    ]
                } else {
                    option3.value.series[0].data = []
                }

                // option1.value.series[0].data[0].value =
                //     data.a00000_Rtd == null || data.a00000_Rtd == undefined
                //         ? 0
                //         : data.a00000_Rtd
                // option2.value.series[0].data[0].value =
                //     data.a24088_Rtd == null || data.a24088_Rtd == undefined
                //         ? 0
                //         : data.a24088_Rtd
                // option3.value.series[0].data[0].value =
                //     data.a34001_Rtd == null || data.a34001_Rtd == undefined
                //         ? 0
                //         : data.a34001_Rtd
            } else {
                ElMessage({
                    type: 'info',
                    message: '测点无资料或未连接',
                })
                //ElMessageBox.alert('测点无资料或未连接','提示',{confirmButtonText: '确定',});
            }
        } else {
            console.log(res)
            ElMessage(res.msg)
        }
    }
}
</script>

<style lang="less" scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    .chart {
        width: 33.33%;
        height: 100%;
    }
}
</style>
